<template>
  <div class="baobao">
    <div class="btn">
      <span
        v-for="(item, index) in btnArr"
        :key="index"
        @click="changeStatus(index)"
        >{{ item }}</span
      >
    </div>
         <div class="lt" v-for="(item, index) in listArr" :key="index">
      <img :src="item.picture" alt="" width="120px" height="120px" />
      <span class="title">{{ item.name }}</span>
      <br />
      <span class="des">{{ item.unit }}</span>
      <br />
      <span class="bb">爆爆团价</span>
      <br />
      <span class="price">￥{{ item.min_price }}</span>
      <br />
      <span class="qiang">马上抢</span>
      <div>
        <span class="orign"><del>￥100</del></span>
        <span class="sum">已售{{ item.month_saled }}份</span>
      </div>
    </div>
  </div>
</template>

<script>
import {shop_list,tuan_list,user_login} from '../../utils/api.js'
export default {
  data() {
    return {
      currentIndex: 0,
      btnArr: ["即将开抢", "正在抢购"],
      listArr: [],
    };
  },
  mounted() {
    tuan_list( {status:this.currentIndex} ).then((res)=>{
      this.listArr = res.data.list;
    })
  },
  beforeUpdate() {
    tuan_list( {status:this.currentIndex} ).then((res)=>{
      this.listArr = res.data.list;
    })
  },
  methods: {
    changeStatus(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style lang='scss' scoped>
.baobao {
  width: 100%;
}

.btn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  height: 40px;
  background-color: cadetblue;
  margin-bottom: 20px;
  margin-top: 100px;
}
.btn span {
  line-height: 40px;
}

.lt {
  width: 96%;
  height: 150px;
  margin: auto;
  background-color: #f5f5f5;
  border-radius: 10px;
  position: relative;
  margin-bottom: 10px;
}

.lt img {
  margin: 15px 10px;
  float: left;
}
.lt .title {
  display: inline-block;
  font-size: 12px;
  color: #888;
  margin-top: 15px;
}
.lt .des {
  font-weight: bold;
  font-size: 14px;
}
.lt .bb {
  font-size: 12px;
  color: orange;
}
.lt .price {
  color: red;
  font-size: 20px;
}
.lt .qiang {
  background-color: red;
  padding: 5px 15px;
  border-radius: 20px;
  color: white;
  font-size: 14px;
  position: absolute;
  right: 10px;
  top: 65px;
}
.lt > div {
  font-size: 12px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.lt > div > .orign {
  color: #999;
}
.lt > div > .sum {
  color: red;
}
</style>